<script setup lang="ts">
// eslint-disable-next-line no-unused-vars
import { ref, nextTick, onMounted } from 'vue';
import browser from 'webextension-polyfill';
// 1、引入
defineProps<{ msg: string }>();
const count = ref(0);
const btnStatus = ref(false);
const inputVal = ref('');

// eslint-disable-next-line no-inner-declarations

async function handleSearch() {
  if (btnStatus.value) {
    return;
  }
  btnStatus.value = true;
  try {
    const xTabs = await browser.tabs.query({
      url: 'https://x.com/*'
    });
    xTabs.forEach((tab) => {
      if (tab.id != null) {
        browser.tabs.sendMessage(tab.id, `{"searchText":"${inputVal.value}"}`);
      }
    });
  } catch (e) {
    console.error(e, 'error');
  } finally {
    btnStatus.value = false;
  }
}
onMounted(() => {
  // init();
});
</script>

<template>
  <div class="card">
    <img src="../assets/img.png" class="avatar" alt="avatar" />
    <div>仅仅针对 https://x.com/*</div>
    <div>{{ `输入查询推文关键字 ：${inputVal}` }}</div>
    <input
      type="text"
      :value="inputVal"
      placeholder="请输入匹配内容"
      @change="
        ($event) => {
          inputVal = ($event.target as HTMLTextAreaElement).value;
        }
      "
    />
    <button @click.stop="handleSearch">点击开始</button>
  </div>
</template>

<style scoped>
.avatar {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
</style>
